<template>
	<div>
		<div class="toolbar">
			<el-button plain type="primary" icon="el-icon-plus" size="mini" @click="showRoleDialog">新增</el-button>
		</div>

		<!-- 列表 -->
		<el-table :data="role_list" style="width: 100%">
			<el-table-column type="index" label="#" width="50"></el-table-column>
			<el-table-column prop="roleName" label="人员实名"></el-table-column>
			<el-table-column prop="createTime" label="创建时间"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="showRoleDialog(scope.row)">编辑</el-button>
					<el-button type="text" size="mini" @click="showPermission(scope.row.id)">权限分配</el-button>
					<el-button type="text" size="mini" @click="deleteRole(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 用户信息窗口 -->
		<el-dialog title="新增角色" :visible.sync="roleDialog" width="30%" :close-on-click-modal="false" @closed="handleClose">
			<el-input v-model="roleName" size="small" placeholder="输入角色名称"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button size="medium" @click="roleDialog = false">取 消</el-button>
				<el-button size="medium" type="primary" @click="submitRole">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 权限分配 -->
		<el-drawer title="权限分配" size="25%" :visible.sync="permissionDrawer" :with-header="false" :show-close="false" @closed="drawerClose">
			<div class="drawerContent">
				<div class="title">权限配置</div>
				<div class="activeRole">当前角色：超级管理员</div>
				<el-divider></el-divider>
				<el-tree ref="menuTree" :data="menu_list" :default-checked-keys="defKeys" default-expand-all check-on-click-node show-checkbox node-key="id" :props="menuProps"></el-tree>
				<el-divider></el-divider>
				<div>
					<el-button class="ml_20" type="primary" icon="el-icon-search" size="mini" @click="saveRolePower">保存配置</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetPower">重置配置</el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import { menusTree } from "../../../api/system/menu";
import { roleList, myRoles, setMyRoles, addRole, updRole, delRole } from "../../../api/system/role";
export default {
	data() {
		return {
			role_list: [],
			menu_list: [],
			roleName: "",
			roleId: "",
			roleDialog: false,
			permissionDrawer: false,
			defKeys: [], // 默认被选中的key_list
			menuProps: {
				label: "title",
				children: "children"
			}
		};
	},
	created() {
		this.getRoleList();
		this.getMenusTree();
	},
	methods: {
		// 角色列表
		async getRoleList() {
			const res = await roleList();
			this.role_list = res.data;
		},
		// 菜单列表
		async getMenusTree() {
			const res = await menusTree();
			this.menu_list = res.data;
		},
		// 显示
		showRoleDialog(row) {
			if (row) {
				this.roleName = row.roleName;
				// 存储当前角色Id
				this.roleId = row.id;
			}
			this.roleDialog = true;
		},
		// 关闭
		handleClose() {
			this.roleName = "";
		},
		// 提交
		async submitRole() {
			if (this.roleName) {
				if (this.roleId) {
					// 修改
					await updRole({ id: this.roleId, roleName: this.roleName });
					this.$message.success("修改成功");
				} else {
					// 新增
					await addRole({ roleName: this.roleName });
					this.$message.success("添加成功");
				}
				this.roleDialog = false;
				this.getRoleList();
			}
		},
		// 删除
		async deleteRole(id) {
			const result = await this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).catch((err) => err);
			if (result !== "confirm") {
				return this.$message.info("取消了删除");
			}
			await delRole({ id: id });
			this.$message.success("删除成功");
			this.getRoleList();
		},
		// 权限显示
		showPermission(id) {
			// 存储当前角色Id
			this.roleId = id;
			this.getMyRoles();
			this.permissionDrawer = true;
		},
		// 权限关闭
		drawerClose() {
			this.roleId = "";
			// 清空已选中数据
			this.$refs.menuTree.setCheckedKeys([]);
		},
		// 查询我的权限
		async getMyRoles() {
			const res = await myRoles({ id: this.roleId });
			const newArr = [];
			if (res.data.length) {
				res.data.forEach((item) => {
					this.checked(Number(item.id), this.menu_list, newArr);
				});
			}
			this.defKeys = newArr;
		},
		// 递归过滤根id
		checked(id, data, newArr) {
			data.forEach((item) => {
				if (item.id === id) {
					if (!item.children.length) {
						newArr.push(item.id);
					}
				} else {
					if (item.children.length) {
						this.checked(id, item.children, newArr);
					}
				}
			});
		},
		// 保存权限配置
		async saveRolePower() {
			// 获取当前被选中的id数组
			const arr1 = this.$refs.menuTree.getCheckedKeys();
			const arr2 = this.$refs.menuTree.getHalfCheckedKeys();
			const menuData = [];
			arr1.forEach(function (item) {
				const obj = {};
				obj.menuId = item;
				menuData.push(obj);
			});
			arr2.forEach(function (item) {
				const obj = {};
				obj.menuId = item;
				menuData.push(obj);
			});
			console.log(menuData);
			await setMyRoles({
				roleId: this.roleId,
				menus: menuData
			});
			this.$message.success("权限配置成功");
		},
		// 重置配置
		resetPower() {
			// 清空已选中数据
			this.$refs.menuTree.setCheckedKeys([]);
		}
	}
};
</script>

<style lang="scss" scoped>
.bold {
	font-weight: bold;
}
.toolbar {
	margin-bottom: 10px;
}
.title {
	font-size: 18px;
	font-weight: bold;
}
.activeRole {
	// font-size: 12px;
	// font-weight: bold;
	margin: 20px 0;
}
.drawerContent {
	padding: 50px 30px;
}
</style>
